<template>
  <div class="bg-blue-300 py-10 min-h-full w-full font-sans">
    <div class="fixed right-9 top-9">
      <button
        @click="noteList.push({ readonly: false, content: '' })"
        class="
          p-2
          text-sm
          bg-green-300
          hover:bg-green-200
          flex
          justify-center
          items-center
          text-white
          rounded
          shadow
        "
      >
        <svg
          t="1629452571085"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2079"
          width="18"
          height="18"
          fill="white"
        >
          <path d="M192 466.261333h640v91.420445H192z" p-id="2080"></path>
          <path
            d="M466.261333 192h91.420445v640H466.261333z"
            p-id="2081"
          ></path>
        </svg>
        <span>Add note</span>
      </button>
    </div>
    <div class="h-full w-full px-10 gap-6 grid grid-cols-3 ">
      <div
        class="col-span-3 md:col-span-1 shadow-md"
        v-for="(item, idx) in noteList"
        :key="idx"
      >
        <div class="h-10 flex justify-end items-center bg-green-400">
          <svg
            @click="item.readonly = !item.readonly"
            t="1629462348591"
            class="icon cursor-pointer mx-2"
            viewBox="0 0 1026 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2929"
            width="20"
            height="20"
          >
            <path
              d="M307.933767 709.191401l55.608246-121.906912 70.215853 67.788777-125.824099 54.118135z m95.818675-171.645022l366.409348-352.874171 82.001279 80.116062-365.732025 352.095249-82.678602-79.33714z m550.042994-370.90226l-50.505744 48.372175-81.854525-80.116062 49.704244-47.593254c8.003704-7.958549 23.435387-6.513593 32.150281 2.144858l48.281866 46.182162c5.147657 5.03477 8.071436 11.559652 8.071436 18.039379 0.011289 5.046059-2.201301 9.36964-5.847558 12.970742zM313.792614 530.299019c-0.745056 0.767633-1.467534 1.478823-2.21259 2.889913L259.640613 717.217683c-2.923779 10.78073 0 22.340381 8.071436 30.310219 6.581325 5.779826 14.607607 9.290618 23.390233 9.290619 2.935068 0 5.113791-0.699901 8.03757-1.399802l190.147239-49.749399h0.79021a8.048859 8.048859 0 0 0 5.791115-2.178724l507.721574-489.208069c15.28493-14.40441 23.356366-33.888744 23.356367-55.551803 0-24.519105-10.927483-49.03821-29.215214-67.077588l-48.281865-46.182163c-19.010208-18.039378-43.935707-28.853974-69.572396-28.853974-22.577445 0-43.145497 7.935972-57.707948 23.074149L314.503803 528.109007c-0.71119 0.699901-0.71119 1.478823-0.711189 2.190012zM100.932466 0C45.358086 0 0 44.70334 0 99.555242V923.530372c0 54.806747 45.358086 99.555242 100.932466 99.555241h806.082505c55.57438 0 100.864734-44.748495 100.864734-99.555241V397.543645h-86.290994v451.729511c0 49.049498-40.221718 87.939147-89.214772 87.939147H175.539632c-49.004344 0-89.214772-38.889648-89.214773-87.939147V173.157711c0-48.338309 40.210429-88.040745 89.214773-88.040745h457.904443V0H100.932466z"
              p-id="2930"
              fill="#ffffff"
            ></path>
          </svg>
          <svg
            @click="noteList.splice(idx, 1)"
            t="1629462368817"
            class="icon cursor-pointer mx-2"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3870"
            width="20"
            height="20"
          >
            <path
              d="M236.307692 236.307692v685.292308a23.630769 23.630769 0 0 0 23.63077 23.630769h504.123076a23.630769 23.630769 0 0 0 23.63077-23.630769V236.307692H236.307692z m393.846154-78.76923v-55.138462a23.630769 23.630769 0 0 0-23.630769-23.630769H417.476923a23.630769 23.630769 0 0 0-23.630769 23.630769v55.138462h236.307692z m78.769231 0h275.692308a39.384615 39.384615 0 1 1 0 78.76923h-118.153847v708.923077c0 43.504246-35.264985 78.769231-78.76923 78.769231H236.307692c-43.504246 0-78.769231-35.264985-78.76923-78.769231V236.307692H39.384615a39.384615 39.384615 0 0 1 0-78.76923h275.692308V78.769231c0-43.504246 35.264985-78.769231 78.769231-78.769231h236.307692c43.504246 0 78.769231 35.264985 78.769231 78.769231v78.769231zM433.230769 393.846154a39.384615 39.384615 0 0 1 39.384616 39.384615v315.076923a39.384615 39.384615 0 0 1-78.769231 0V433.230769a39.384615 39.384615 0 0 1 39.384615-39.384615z m157.538462 0a39.384615 39.384615 0 0 1 39.384615 39.384615v315.076923a39.384615 39.384615 0 0 1-78.769231 0V433.230769a39.384615 39.384615 0 0 1 39.384616-39.384615z"
              fill="#ffffff"
              p-id="3871"
            ></path>
          </svg>
        </div>
        <div class="h-60 md:h-96">
          <textarea
            :readonly="item.readonly"
            v-model="item.content"
            class="resize-none h-full w-full px-2 pt-1 outline-none"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

interface NoteProp {
  readonly?: boolean,
  content?: string,
}

export default defineComponent({
  setup() {
    const noteList: NoteProp[] = reactive<NoteProp[]>([]);
    return {
      noteList
    };
  },
});
</script>

<style scoped>
</style>